<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>叮咚租车主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/rent.css" />
    <!-- 导入layui的 css js -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.7.6/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.7.6/layui/layui.js"></script>
</head>

<body>
<div class="header">
    <div class="inner">
        <div class="logo">
            <img src="${pageContext.request.contextPath}/images/car3.jpg">
        </div>
        <div class="nav">

            <ul class="layui-nav" lay-filter="">
                <li class="layui-nav-item"><a href="">首页</a></li>
                <li class="layui-nav-item"><a href="">自驾租车</a></li>
                <li class="layui-nav-item"><a href="">二手车</a></li>
                <li class="layui-nav-item"><a href="">自驾游</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">车型查询</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="">SUV</a></dd>
                        <dd><a href="">小汽车</a></dd>
                        <dd><a href="">大巴车</a></dd>
                        <dd><a href="">更多</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">营业网点</a></li>
                <li class="layui-nav-item"><a href="">精彩活动</a></li>
                <li class="layui-nav-item"><a href="zhuce.jsp">注册</a></li>
                <li class="layui-nav-item"><a href="login.jsp">登录</a></li>
            </ul>

        </div>
    </div>
</div>

<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div><img src="${pageContext.request.contextPath}/images/freemoney.jpg"></div>
        <div><img src="${pageContext.request.contextPath}/images/safe.jpg"></div>
        <div><img src="${pageContext.request.contextPath}/images/time.jpg"></div>
    </div>
</div>

<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });



    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

</script>

<div class="service inner">
    <div class="ser-head">
        <p class="ads">
            叮咚租车，国内领先的独立租车解决
            方案及全渠道租车平台。完整的租车体系，
            简约的系统，个性化前端，全覆盖多渠道营销体系...
        </p>
        <p class="ads">
            我们致力于打造一个服务于品牌租车的完整生态，让租车之路变得更简单，也更有价值！
        </p>
    </div>
    <div class="ser-body">
        <ul class="clearfix">
            <c:forEach var="product" items="${productList}">
                <li>
                    <img src="${pageContext.request.contextPath}/${product.proImg}" >
                    <h2>
                        <label>中文名:</label>
                        <span>${product.proName}</span>
                    </h2>
                    <p>
                        <label>品牌:</label>
                        <span>${product.proBrand}</span>
                        <br>
                        <label>类型:</label>
                        <span>${product.proType}</span>
                        <br>
                        <label>油箱容量:</label>
                        <span>${product.proCapacity}</span>
                    </p>
                    <div class="pre">
                        <a href="${pageContext.request.contextPath}/product/${product.proId}">我要预定</a>
                    </div>
                </li>
            </c:forEach>
        </ul>
    </div>
</div>
<div class="app-download-bar-wrapper app-download-bar-wrapper-bar1">
    <div class="app-download-bar">
        <div class="app-download-bar-desc">
            <div class="app-download-bar-desc-title">
                <span>更便捷</span>
            </div>
            <div class="app-download-bar-desc-content">
                <p>快速定位查找身边最近门店</p>
                <p>租车流程简化，轻松操作</p>
            </div>
        </div>
        <div class="app-download-bar-image">
            <div class="app-download-bar1-image"></div>
        </div>
    </div>
</div>
</body>
</html>